
<nz-page-header >
    <nz-page-header-title>设备列表</nz-page-header-title>
    <nz-page-header-content>
        <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" >
            <nz-form-item>
              <nz-form-control >
                <nz-input-group nzPrefixIcon="barcode">
                  <input formControlName="deviceSn" nz-input placeholder="设备Sn" />
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control >
                  <nz-input-group nzPrefixIcon="idcard">
                    <input formControlName="deviceId" nz-input placeholder="设备Id" />
                  </nz-input-group>
                </nz-form-control>
              </nz-form-item>
            <nz-form-item>
              <nz-form-control>
                <nz-space>
                <button nz-button nzType="primary" (click)="query()" >查询</button>
                <button nz-button nzType="default" (click)="showAddModal()">新增</button>
              
                </nz-space>
              </nz-form-control>
            </nz-form-item>
          </form>
    </nz-page-header-content>
  </nz-page-header>
  <nz-modal
  [(nzVisible)]="isVisibleOfAddModal"
  nzTitle="新增设备"
  (nzOnCancel)="cancelAdd()"
  (nzOnOk)="confirmAdd()"
  [nzOkLoading]="isOkLoadingOfAddModal"
>
 
  <form  *nzModalContent nz-form [nzLayout]="'inline'" [formGroup]="validateFormOfAddModal" >
    <nz-form-item>
      <nz-form-control >
        <nz-input-group nzPrefixIcon="barcode">
          <input formControlName="deviceSnOfAddModal" nz-input placeholder="设备Sn" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-control >
          <nz-input-group nzPrefixIcon="idcard">
            <input formControlName="deviceIdOfAddModal" nz-input placeholder="设备Id" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
  </form>
</nz-modal>
  <nz-table #basicTable [nzData]="listOfData">
    <thead>
      <tr>
        <th>设备Sn</th>
        <th>设备Id</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      @for (data of basicTable.data; track data.Id) {
        <tr>
          <td>{{ data.deviceSn }}</td>
          <td>{{ data.deviceId }}</td>
          <td>
            <a
            nz-popconfirm
            nzPopconfirmTitle="确定删除?"
            (nzOnConfirm)="confirmDelete(data.Id)"
            (nzOnCancel)="cancelDelete()"
            >删除</a>
          </td>
        </tr>
      }
    </tbody>
  </nz-table>
  
